<template>
	<view class="page">
		<scroll-view scroll-y="true" @scrolltolower="scrollPage" style="position: absolute;height:100%;width:100%;">
			<view class="m-product-list">
				<navigator :url="'/pagesub/product/detail?id=' + (gbInfo.item_id) + '&gb_id=' + (gbInfo.gb_id)" class="m-product-item m-product-GP">
					<view class="m-product-img">
						<image lazy-load :src="(gbInfo.order_item_image)" />
					</view>
					<view class="m-product-info">

						<view class="m-product-name">
							<label>
								{{ gbInfo.product_name }}</label>
							<label class="m-min-name" style="overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1">
								{{ gbInfo.item_name ? gbInfo.item_name : "" }}
							</label>
							<view class='groupNumber' style='margin-top:8rpx'>
								<text>{{ gbInfo.gb_quantity }}</text>
								{{ __(' 人团省 ') }}
								{{ __('￥') }}{{ number_format(gbInfo.item_unit_price - gbInfo.order_item_sale_price, 2) || 0 }}
							</view>
						</view>
						<view style='position:absolute;bottom:20rpx;'>
							<view class="m-product-price">
								<label>{{ __('￥') }}</label>{{ number_format(gbInfo.order_item_sale_price, 2) || 0 }}
								<label class="u-del-price">{{ __('￥') }}{{ number_format(gbInfo.item_unit_price, 2) || 0 }}</label>
							</view>
						</view>

						<view class="isSucces">
							<image lazy-load class='simg' v-if="(1==gbInfo.gb_enable)" src='https://static.shopsuite.cn/xcxfile/appicon/groupbooking/success.png'></image>
							<image lazy-load class='simg' v-if="(0==gbInfo.gb_enable)" src='https://static.shopsuite.cn/xcxfile/appicon/groupbooking/failure.png'></image>
						</view>
					</view>
				</navigator>
				<view class="headPhoto">
					<view class="personPhoto" v-for="(item, i) in groupUsers" :key="i">
						<image lazy-load class="photo" :src="(item.user_avatar)"></image>
						<image lazy-load class="photo-icon" src="https://slqdho2ouat-dhqc-dhqc.s3-zz-prda.sail-cloud.com/xcxfile/appicon/groupbooking/group_leader.png" v-if="(gbInfo.user_id == item.user_id)"></image>
					</view>
					<view class="personPhoto" v-if="(gbInfo.gb_quantity - gbInfo.gb_amount_quantity) >= 0 && (gbInfo.gb_quantity>8?(8-gbInfo.gb_amount_quantity):(gbInfo.gb_quantity-gbInfo.gb_amount_quantity))">
						<view v-for="index in (gbInfo.gb_quantity - gbInfo.gb_amount_quantity)" :key="index" style="display: inline-block;">
							<image lazy-load class="photo-bg" src='https://slqdho2ouat-dhqc-dhqc.s3-zz-prda.sail-cloud.com/xcxfile/appicon/groupbooking/waiting.png'></image>
						</view>
					</view>
				</view>
				<view class="surplus" v-if="(gbInfo.gb_enable==2 && show)">
					<view>{{ sprintf(__('仅剩%s名额，'), gbInfo.gb_quantity - gbInfo.gb_amount_quantity) }}</view>
					<label style='min-width:160rpx;'>
						<day-countdown :timer="(gbInfo.gb_endtime)" :Type="2"></day-countdown>
					</label>
					<label>{{ __('后结束') }}</label>
				</view>
				<block v-if="(show)">
					<view class="m-btn-box" v-if="(gbInfo.gb_enable==2 && !groupIsEnd)">
						<view class="u-btn u-btn-default" @click="shareBox">{{ __('邀请好友参团') }}</view>
					</view>
					<navigator url="/activity/fightgroup/list" class="m-btn-box" v-if="(gbInfo.gb_enable==0)">
						<view class="u-btn u-btn-default">{{ __('点击再开一团') }}</view>
					</navigator>
					<navigator url="/activity/fightgroup/list" class="m-btn-box" v-if="(gbInfo.gb_enable==1)">
						<view class="u-btn u-btn-default">{{ __('点击再开一团') }}</view>
					</navigator>
					<view class="m-btn-box" v-if="(gbInfo.gb_enable==2 && !ispaysuccess)">
						<view class="u-btn u-btn-default" @click="immediatelyOffered">{{ __('参与活动') }}</view>
					</view>
				</block>
			</view>
			<view class='rule'>
				<view class='rule-header'>
					{{ __('拼团规则') }}
				</view>
				<view class='rule-content'>
					{{ gbInfo.activity_remark }}
				</view>
			</view>
			<view class="link">
				<navigator url="/pages/index/index" open-type="switchTab" class="nav">
					<image lazy-load class="nav-img" src="https://static.shopsuite.cn/xcxfile/appicon/images/index.png"></image>
					<text>{{ __('首页逛逛') }}</text>
				</navigator>
				<navigator url="/pages/category/category" open-type="switchTab" class="nav">
					<image lazy-load class="nav-img" src="https://static.shopsuite.cn/xcxfile/appicon/images/allproduct.png"></image>
					<text>{{ __('全部商品') }}</text>
				</navigator>
				<navigator url="/activity/coupon/list" class="nav">
					<image lazy-load class="nav-img" src="https://static.shopsuite.cn/xcxfile/appicon/images/coupon.png"></image>
					<text>{{ __('领券中心') }}</text>
				</navigator>
				<navigator url="/pages/index/member" open-type="switchTab" class="nav">
					<image lazy-load class="nav-img" src="https://static.shopsuite.cn/xcxfile/appicon/images/center.png"></image>
					<text>{{ __('个人中心') }}</text>
				</navigator>
			</view>
		</scroll-view>

		<!-- #ifdef H5 -->
		<!-- <share-box-h5 :shareDataDefault="shareData" ref="shareBoxH5"></share-box-h5> -->
		<!-- #endif -->
		<share-box-mp :shareDataDefault="shareData" @cancelShare="cancelShare" @showCodeImg="showCodeImg" @shareQRCode="shareQRCode" @saveImg="saveImg" ref="shareBoxMp"></share-box-mp>
		<share-box-app :shareDataDefault="shareData" ref="shareBoxApp"></share-box-app>
		<l-painter useCORS @success="createPoster($event)" isCanvasToTempFilePath ref="painter" path-type="url" custom-style="position: fixed; left: 200%"></l-painter>
	</view>
</template>

<script>
	import $ from "../../helpers/util";


	import dayCountdown from "../components/day-countdown.vue";
	import shareBoxMp from '../../components/share-box-mp.vue'
	import shareBoxApp from '../../components/share-box-app.vue'

	import {
		mapMutations,
		mapState
	} from 'vuex'

	export default {
		data: function() {
			return {
				options: {},
				Photo: "",
				UserName: "",
				splistStr: [],
				ispaysuccess: false,
				isOwner: false,
				orderId: "",
				isfg: false,
				gbInfo: {
					activity_rule: {}
				},
				groupUsers: [],
				isPage: true,
				page: 1,
				Coupons: [],
				isCancelSuccess: true,
				isCancel: true,
				CouponAmount: 0,
				user_is_new: 0,
				userInfoId: 0,
				show: true,
				groupIsEnd: false,


				PageQRCodeInfo: {
					Path: "",
					IsShare: false,
					IsShareBox: false,
					IsJT: false
				},
				shareData: {
					shareText: '随商商城系统，支持原生App、微信小程序，邀请你一起体验！',
					shareTitle: '随商商城系统，支持原生App、微信小程序，邀请你一起体验！',
					href: "https://www.suteshop.com",
					image: '',
					price: 0
				},
				//BEGIN 生成海报参数
				productPoster: '',
				poster: {
					css: {
						width: "750rpx",
						height: '1334rpx',
						background: '#fff'
					},
					views: [{
							type: "image",
							src: "https://kuteshop.oss-accelerate.aliyuncs.com/modulithshop/image/media/plantform/20230915/c9ef027ff64d4cd1b81c7c521f565524.jpg",
							css: {
								left: '0rpx',
								top: '0rpx',
								width: '750rpx',
								height: '1334rpx',
								position: "fixed"
							}
						}, {
							type: "image",
							src: "商品图片",
							css: {
								left: '20rpx',
								top: '20rpx',
								width: '710rpx',
								height: '710rpx',
								position: "fixed"
							}
						},
						{
							type: 'text',
							text: '商品名称',
							css: {
								maxLines: 2,
								lineClamp: 2,
								width: '680rpx',
								left: '35rpx',
								top: '770rpx',
								fontSize: '28rpx',
								color: '#333',
								lineHeight: '50rpx',
								position: "fixed"
							}
						},
						{
							type: 'text',
							text: '¥0',
							css: {
								width: '680rpx',
								left: '35rpx',
								top: '890rpx',
								fontSize: '38rpx',
								color: '#E50F41',
								position: "fixed"
							}
						}, {
							type: "qrcode",
							text: "二维码",
							css: {
								left: '35rpx',
								top: '990rpx',
								width: '260rpx',
								height: '260rpx',
								position: "fixed"
							}
						}, {
							type: 'text',
							text: '长按保存或扫码查看',
							css: {
								position: "fixed",
								left: '60rpx',
								top: '1270rpx',
								fontSize: '20rpx',
								color: '#999'
							}
						}
					]
				},
				//END 商品海报信息

				shareText: '随商商城系统，支持原生App、微信小程序，邀请你一起体验！',
				shareTitle: '随商商城系统，支持原生App、微信小程序，邀请你一起体验！',
				href: "https://www.suteshop.com",
				image: ''

			}
		},
		computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
		components: {
			dayCountdown,
			shareBoxMp,
			shareBoxApp
		},
		onLoad: function(options) {
			uni.setNavigationBarTitle({
				title: this.__('拼团详情')
			});

			var that = this;

			that.setData({
				options: options,
				orderId: options.on || ""
			})

			this.forceUserInfo(function(user) {
				that.setData({
					user_is_new: that.userInfo.user_is_new,
					CouponAmount: that.userInfo.CouponAmount
				});


				that.initData(options);

			});
			this.getPlantformInfo(function(plantformInfo) {
				that.poster.views[0].src = plantformInfo.product_poster_bg;
				that.setData({
					//b2bFlag: plantformInfo.b2b_flag
				})
			});

			this.notice.addNotification("RefreshFG", that.refreshGb, that)
		},
		onBackPress() {
			// #ifdef APP-PLUS
			if (this.$refs.shareBoxApp.showBoxView) {
				this.$refs.shareBoxApp.cancel();
				return true;
			}
			// #endif

			// #ifdef MP-WEIXIN
			if (this.$refs.shareBoxMp.showBoxView) {
				this.$refs.shareBoxMp.cancel();
				return true;
			}
			// #endif
		},
		onUnload() {
			// 离开页面，注销事件
			var that = this
			this.notice.removeNotification("RefreshFG", that);

			// #ifdef APP-PLUS
			if (this.$refs.shareBoxApp.showBoxView) {
				this.$refs.shareBoxApp.cancel();
			}
			// #endif

			// #ifdef MP-WEIXIN
			if (this.$refs.shareBoxMp.showBoxView) {
				this.$refs.shareBoxMp.cancel();
			}
			// #endif
		},
		onShareAppMessage: function() {
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
			// #endif

			var e = this.gbInfo.gb_quantity - this.gbInfo.gb_amount_quantity,
				t = e > 0 ? this.$.sprintf(this.__("【还差 %d 人】 %s 邀请您参加拼团！立省 %.2f 元！"), (this.gbInfo.gb_quantity - this.gbInfo.gb_amount_quantity), this.userInfo.user_nickname, (this.gbInfo.order_item_sale_price - this.gbInfo.item_unit_price).toFixed(2)) : this.$.sprintf(this.__("%s 拼团成功！他已节省 %.2f 元！赶快来拼团吧!"), this.userInfo.user_nickname, (this.gbInfo.item_unit_price - this.gbInfo.order_item_sale_price).toFixed(2));

			let path = this.$.sprintf('/activity/fightgroup/detail?gb_id=%d&pid=%d&on=%s&uid=%d', this.gbInfo.gb_id, this.gbInfo.item_id, this.orderId, this.userInfo.user_id);

			return {
				imageUrl: this.gbInfo.order_item_image,
				title: t,
				path: path
			}
		},
		/**
		 * 用户点击右上角分享朋友圈
		 */
		onShareTimeline: function() {
			var e = this.gbInfo.gb_quantity - this.gbInfo.gb_amount_quantity,
				t = e > 0 ? this.$.sprintf(this.__("【还差 %d 人】 %s 邀请您参加拼团！立省 %.2f 元！"), (this.gbInfo.gb_quantity - this.gbInfo.gb_amount_quantity), this.userInfo.user_nickname, (this.gbInfo.order_item_sale_price - this.gbInfo.item_unit_price).toFixed(2)) : this.$.sprintf(this.__("%s 拼团成功！他已节省 %.2f 元！赶快来拼团吧!"), this.userInfo.user_nickname, (this.gbInfo.item_unit_price - this.gbInfo.order_item_sale_price).toFixed(2));

			let path = this.$.sprintf('/activity/fightgroup/detail?gb_id=%d&pid=%d&on=%s&uid=%d', this.gbInfo.gb_id, this.gbInfo.item_id, this.orderId, this.userInfo.user_id);


			return {
				title: t,
				query: {
					gb_id: this.gbInfo.gb_id,
					on: this.orderId,
					uid: this.userInfo.user_id,
					pid: this.gbInfo.item_id
				},
				imageUrl: this.gbInfo.order_item_image,
			}
		},
		methods: {
			...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),

			initData: function(options) {
				var that = this;
				that.setData({
					Photo: that.userInfo.user_avatar,
					UserName: that.userInfo.user_nickname,
					isfg: options.isfg || false
				});

				var params = {
					gb_id: options.gb_id || "",
					order_id: options.on || ""
				};

				//todo 详情
				$.request({
					url: this.Config.URL.marketing.getUserGroupbooking,
					data: params,
					success: function(data, status, msg, code) {
						if (status == 200) {

							if (data.gb_users) {
								data.gb_users.forEach(function(e) {
									e.user_id == that.userInfo.user_id && (that.setData({
										userInfoId: e.user_id
									}));

									//判断是否团长
									if (e.user_id == that.userInfo.user_id) {
										e.user_id == that.userInfo.user_id && that.setData({
											ispaysuccess: true,
											isOwner: e.user_id == data.user_id,
										})
									}
								});
							}


							var $now = (new Date).getTime();
							var $end = data.gb_endtime;
							var $activityEnd = data.activity_endtime;
							data.endTime = $end - $now;
							if (data.endTime <= 0) {
								that.setData({
									groupIsEnd: true,
									show: false
								});
							}
							if ($activityEnd - $now <= 0) {
								that.setData({
									show: false,
								});
							}
							data.gb_endtime = that.$.formatDateFormatter(data.gb_endtime, 'yyyy-MM-dd hh:mm:ss')
							that.setData({
								gbInfo: data,
								groupUsers: data.gb_users,
							});

							that.poster.views[1].src = data.order_item_image
							that.poster.views[2].text = that.gbInfo.gb_quantity - that.gbInfo.gb_amount_quantity > 0 ? that.$.sprintf(that.__("【还差 %d 人】 %s 邀请您参加拼团！立省 %.2f 元！"), (that.gbInfo.gb_quantity - that.gbInfo.gb_amount_quantity), that.userInfo.user_nickname, (that.gbInfo.order_item_sale_price - that.gbInfo.item_unit_price).toFixed(2)) : that.$.sprintf(that.__("%s 拼团成功！他已节省 %.2f 元！赶快来拼团吧!"), that.userInfo.user_nickname, (that.gbInfo.item_unit_price - that.gbInfo
								.order_item_sale_price).toFixed(2));
							that.poster.views[3].text = that.$.sprintf(that.__("拼团单价 ¥%.2f"), that.gbInfo.order_item_sale_price);
							that.poster.views[4].text = that.Config.SiteUrl + "/h5/activity/fightgroup/detail?gb_id=" + that.gbInfo.gb_id + "&pid=" + that.gbInfo.item_id + "&on=" + that.orderId + "&uid=" + that.userInfo.user_id;
						}
					}
				});
			},
			//生成的海报图片
			createPoster(e) {
				this.productPoster = e
				if (this.productPoster) {
					uni.hideLoading();
					this.$refs.shareBoxMp.path = this.productPoster;
				}
			},

			refreshGb: function() {
				var that = this,
					t = {
						gb_id: that.gbInfo.gb_id
					};
				that.initData(t)
			},

			immediatelyOffered: function() {
				$.navigateTo({
					url: "/pagesub/checkout/checkout?ifcart=0&cart_id=" + this.gbInfo.item_id + "|" + 1 + "|" + 0 + "&activity_id=" +
						this.gbInfo.activity_id + "&gb_id=" + this.gbInfo.gb_id
				})
			},

			doReceive: function() {
				this.cancel(), this.userReceiveCoupon()
			},
			cancel: function() {
				this.setData({
					isCancel: false
				})
			},
			cancelsuccess: function() {
				this.setData({
					isCancelSuccess: true
				})
			},
			innertouch: function() {},
			userReceiveCoupon: function() {
				/*
				var e = {
				  CouponIds: "",
				  user_is_new: this.user_is_new
				};

				this.setData({
				  isCancelSuccess: false,
				  Coupons: res.Info
				})
				 */
			},
			scrollPage: function(e) {
				if (this.isPage) {
					this.setData({
						isPage: false
					});
					var t = this;
					clearTimeout(n);
					var n = setTimeout(function() {
							var e = {
								gb_id: t.gbInfo.gb_id,
								EventId: t.gbInfo.MarketingEventId,
								page: parseInt(t.page) + 1
							};
							/*$.request($.makeUrl(fgapi.GetGroupMarketingEventUsersByPage, e), function (n) {
							    if (n.Info.length > 0)
							    {
							        var r = t.gbInfo;
							        r.gbh_rows = r.gbh_rows.concat(n.Info), t.setData({
							            isPage: true,
							            page: e.page,
							            gbInfo: r
							        })
							    }
							    else
							    {
							        t.setData({isPage: false})
							    }
							})*/
						},
						500)
				}
			},
			shareQRCode: function(e) {
				let that = this;
				if (this.productPoster == '') {
					uni.showLoading({
						title: '海报生成中..',
						mask: true
					});

					// #ifdef MP-WEIXIN
					let path = that.$.sprintf('%s/h5/activity/fightgroup/detail?gb_id=%d&pid=%d&on=%s&uid=%d', that.Config.SiteUrl, this.gbInfo.gb_id, this.gbInfo.item_id, this.orderId, this.userInfo.user_id);
					that.$.request({
						url: that.Config.URL.fx.poster,
						data: {
							user_id: that.userInfo.user_id,
							path: path,
							width: 430,
							poster_type: 2
						},
						success: function(data, status, msg, code) {
							if (200 == status) {
								let qrcode_url = data.qrcode;

								if (data.qrcode.indexOf("?") != -1) {
									qrcode_url = data.qrcode + '&rand=' + Math.random()
								} else {
									qrcode_url = data.qrcode + '?rand=' + Math.random()
								}

								that.poster.views[4].type = 'image';
								that.poster.views[4].src = qrcode_url;
								that.$refs.painter.render(that.poster);
							} else {

							}
						}
					});
					// #endif

					// #ifdef H5
					that.$refs.painter.render(this.poster);
					// #endif

				}
			},
			shareBox: function() {
				let that = this;

				let $href = $.sprintf('%s/h5/activity/fightgroup/detail?gb_id=%d&pid=%d&on=%s&uid=%d', that.Config.SiteUrl, this.gbInfo.gb_id, this.gbInfo.item_id, this.orderId, this.userInfo.user_id);
				// 如允许点击超链接跳转，则应该打开一个新页面，并传入href，由新页面内嵌webview组件负责显示该链接内容
				// #ifdef APP-PLUS
				$href = $.sprintf('%s/tmpl/activity/group_detail.html?gb_id=%d&pid=%d&FX=%d', this.Config.WapSiteUrl, this.gbInfo.gb_id, this.gbInfo.item_id, this.userInfo.user_id);
				$href = $.sprintf('%s/tmpl/activity/group_detail.html?gb_id=%d&pid=%d&FX=%d', this.Config.WapSiteUrl, this.gbInfo.gb_id, this.gbInfo.item_id, this.userInfo.user_id);

				$href = $.sprintf('%s/h5/activity/fightgroup/detail?gb_id=%d&pid=%d&on=%s&uid=%d', that.Config.SiteUrl, this.gbInfo.gb_id, this.gbInfo.item_id, this.orderId, this.userInfo.user_id);
				// #endif

				// #ifdef MP-WEIXIN
				$href = that.$.sprintf('/activity/fightgroup/detail?gb_id=%d&pid=%d&on=%s&uid=%d', this.gbInfo.gb_id, this.gbInfo.item_id, this.orderId, this.userInfo.user_id);
				// #endif

				var t = that.gbInfo.gb_quantity - that.gbInfo.gb_amount_quantity > 0 ? that.$.sprintf(that.__("【还差 %d 人】 %s 邀请您参加拼团！立省 %.2f 元！"), (that.gbInfo.gb_quantity - that.gbInfo.gb_amount_quantity), that.userInfo.user_nickname, (that.gbInfo.order_item_sale_price - that.gbInfo.item_unit_price).toFixed(2)) : that.$.sprintf(that.__("%s 拼团成功！他已节省 %.2f 元！赶快来拼团吧!"), that.userInfo.user_nickname, (that.gbInfo.item_unit_price - that.gbInfo.order_item_sale_price).toFixed(2));

				this.setData({
					shareData: {
						shareTitle: this.gbInfo.product_name,
						shareText: t,
						href: $href,
						image: this.gbInfo.order_item_image,
						price: this.gbInfo.order_item_sale_price
					}
				});


				// #ifdef APP-PLUS
				this.$refs.shareBoxApp.show();
				// #endif

				// #ifdef MP-WEIXIN
				this.$refs.shareBoxMp.show();
				// #endif


				// #ifdef H5
				if (that.$.ifUniApp()) {
					this.$refs.shareBoxH5.show();
				} else {
					this.$refs.shareBoxMp.show();
				}
				// #endif

				return;

				this.setData({
					PageQRCodeInfo: {
						Path: "",
						IsShare: true,
						IsShareBox: true,
						IsJT: false
					}
				})
			},
			cancelShare: function() {
				this.setData({
					PageQRCodeInfo: {
						Path: "",
						IsShare: false,
						IsShareBox: false,
						IsJT: false
					}
				})
			},
			saveImg: function() {
				var e = this;
				$.showLoading();
				$.downloadFile({
					url: this.PageQRCodeInfo.Path,
					success: function(t) {
						$.hideLoading(), $.saveImageToPhotosAlbum({
							filePath: t.tempFilePath,
							success: function() {
								e.setData({
									PageQRCodeInfo: {
										Path: "",
										IsShare: false,
										IsShareBox: false,
										IsJT: false
									}
								}), $.alert("保存图片成功！")
							},
							fail: function(e) {
								$.hideLoading()
							}
						})
					},
					fail: function(e) {
						$.hideLoading()
					}
				})
			},
			showCodeImg: function() {
				$.previewImage({
					current: this.PageQRCodeInfo.Path,
					urls: [this.PageQRCodeInfo.Path]
				})
			}
		}
	};
</script>


<style lang="scss">
	@import "../../styles/_variables";

	.groupNumber {
		font-size: 24rpx;
		color: #888;
	}

	.groupNumber .icon-icon {
		font-size: 24rpx;
		display: inline
	}

	/* .groupNumber text{margin: 0 2rpx} */
	.progressBarBox {
		position: absolute;
		right: 0;
		bottom: 0rpx;
		margin-bottom: -20rpx;
		color: #888;
		font-size: 24rpx;
		margin-right: 20rpx;
	}

	.u-progressBar {
		display: inline-block;
		width: 140rpx;
		height: 20rpx;
		background-color: #d5d5d5;
		border-radius: 20rpx;
		overflow: hidden
	}

	.u-progressBar-cont {
		height: 20rpx;
		background-color: #ffc001;
	}

	.u-progressBar-text {
		line-height: 25rpx;
	}

	.m-product-price .u-btn {
		padding: 0 10rpx;
		margin: 0 20rpx;
		float: right;
		font-size: 24rpx;
		line-height: 50rpx;
		margin-top: 10rpx;
	}

	.m-product-GP {
		height: 270rpx;
	}

	.m-product-GP .m-product-img {
		height: 270rpx;
		width: 270rpx;
	}

	.m-product-GP .m-product-price {
		line-height: 28rpx;
		font-size: 40rpx
	}

	.m-product-GP .m-product-info {
		height: 270rpx;
		width: 480rpx;
		position: relative
	}

	.u-del-price {
		color: #888888;
		font-size: 20rpx;
		text-decoration: line-through;
	}

	.icon-box {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		background-color: #fff;
		padding: 20rpx;
		margin-top: 20rpx;
		position: relative;
	}

	.icon-box image {
		width: 80rpx;
		height: 80rpx;
	}

	.icon-box image {
		margin-right: 32rpx;
	}

	.icon-box-title {
		font-weight: 400;
		color: #DB384B;
	}

	.icon-box-desc {
		margin-top: 12rpx;
		font-size: 24rpx;
		color: #888;
	}

	.icon-box icon {
		margin-right: 10rpx;
	}

	.m-media-box-bd text {
		margin-left: 10rpx;
	}

	.m-media-box-info {
		color: #888;
	}

	.u-time-show {
		position: absolute;
		width: 280rpx;
		height: 80rpx;
		border: 1rpx solid $default-skin-bg;
		left: 50%;
		bottom: 0;
		margin-left: -140rpx;
		border-radius: 80rpx;
		margin-bottom: -60rpx;
		z-index: 2;
		background-color: #fff;
		box-shadow: 0px 0rpx 10rpx rgba(0, 0, 0, 0.35);
		line-height: 80rpx;
		text-align: center;
	}

	.u-time-show label {
		font-size: 24rpx;
	}

	.u-time-show text {
		color: $default-skin-bg !important;
	}

	/*底部按钮 start*/
	.m-footer-btn {
		height: 100rpx;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		text-align: center;
		z-index: 3
	}

	.m-footer-btn-main {
		width: 50%;
		height: 100%;
		float: left;
		background-color: $default-skin-bg;
		color: #fff;
		line-height: 100rpx;
		font-size: 32rpx;
	}

	.m-footer-desable {
		-webkit-filter: grayscale(1);
		filter: grayscale(1);
	}

	.m-now {
		background-color: #ffc001;
	}

	/*底部按钮 end*/
	/*团长标签*/
	.u-fg-label {
		display: inline-block;
		font-size: 24rpx;
		color: #888;
		padding-right: 20rpx;
		color: $default-skin-bg
	}

	.u-fg-label label {
		color: yellow;
		font-size: 28rpx;
	}

	.m-media-box-thumb {
		border-radius: 100%;
	}

	.icon-box image {
		border-radius: 100%;
	}

	/*团长标签*/
	/* .u-btn {
padding:0 10rpx;
width:200rpx;
font-size:24rpx;
line-height:50rpx;
background-color:$default-skin-bg;
color:#fff;
position: absolute;
right: 20rpx;
top:54rpx;
} */
	.m-product-list {
		background: #fff;
		overflow: hidden
	}

	.m-product-name {
		height: 116rpx
	}

	.headPhoto {
		overflow: hidden;
		display: flex;
		width: 90%;
		margin: 20rpx auto;
		justify-content: center;
		margin-top: 0px;
	}

	.personPhoto {
		position: relative;
		margin: 0.2%
	}

	.photo-icon {
		position: absolute;
		width: 52rpx;
		height: 36rpx;
		top: -6rpx;
		left: -10rpx
	}

	.photo {
		width: 68rpx;
		height: 68rpx;
		border-radius: 50%;
		border: 4rpx solid sandybrown;
		margin-top: 8rpx;
		margin-left: 2rpx;
		margin-right: 2rpx
	}

	.photo-bg {
		width: 76rpx;
		height: 76rpx;
		border-radius: 50%;
		margin-top: 8rpx;

	}

	.m-product-info::before {
		border: none
	}

	.time text {
		color: #DB384c
	}

	.surplus {
		display: flex;
		justify-content: center;
		font-size: 30rpx;
		margin: 20rpx 0;
		align-items: center
	}

	.link {
		display: flex;
		justify-content: space-around;
		background: #fff;
		margin-top: 20rpx
	}

	.nav {
		flex: 1;
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
		height: 200rpx
	}

	.nav-img {
		width: 80rpx;
		height: 80rpx
	}

	.nav text {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #333
	}

	.isSucces {
		position: absolute;
		right: 30rpx;
		bottom: 10rpx;
	}

	.isSucces image {
		width: 150rpx;
		height: 150rpx
	}

	.rule {
		padding: 20rpx;
		background: #fff;
		margin-top: 20rpx
	}

	.rule-header {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 20rpx
	}

	.rule-content {
		font-size: 24rpx;
		color: #777777
	}
</style>